<template>
  <el-menu
    class="data-source-aside-menu"
    :default-active="selectKey?.toString()"
  >
    <el-menu-item
      :index="item.id.toString()"
      v-for="(item) in props.serviceVersionVOs"
      :key="item.service.code"
      @click="handleSelect(item.id)"
    >
      <div class="menu-item-wrapper">
        <div class="data-source-menu-i" :class="item.service.method">{{
            item.service.method
          }}
        </div>
        <div class="data-source-menu-label">{{ item.service.name }}</div>
        <div class="data-source-menu-action">

          <el-button type="danger" icon="el-icon-delete" plain circle
                     class="menu-action-button"
                     size="small" @click="handleRemove(item.id)"></el-button>
        </div>
      </div>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ServiceVersionVOType } from '@coolphk/shared-types/low-code'

defineOptions({
  name: 'subscription-service-sidebar',
})
const selectKey = defineModel<string>()
const props = withDefaults(defineProps<{
  serviceVersionVOs: ServiceVersionVOType[]
}>(), {
  serviceVersionVOs: () => [],
})
const emits = defineEmits(['handleSidebarSelect', 'handleSideBarRemove'])
const handleSelect = async (id) => {
  selectKey.value = id
  // console.log('handleSelect', selectKey.value)
  emits('handleSidebarSelect', id)
}
const handleClone = (index) => {
  // props.services
}
const handleRemove = (id) => {
  emits('handleSideBarRemove', id)
}
</script>

<style scoped lang="scss">
.menu-item-wrapper {
  width: 100%;
  display: flex;
  align-items: center;

  .menu-action-button {
    :deep(.ep-icon) {
      margin-right: 0;
    }
  }
}

.data-source-aside-menu {
  margin: 10px;
  border-right: 0;

  .ep-menu-item {
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 3px;
    padding: 10px !important;
    height: auto;
    line-height: 1;
    cursor: default;
    position: relative;

    &.is-disabled {
      opacity: 1;
      cursor: default;
      background: #fff;
    }

    &.is-active {
      background: #e4e7ed;
      color: #303133;
    }

    &.is-active.is-disabled {
      background: #e4e7ed !important;
      color: #303133;
    }

    + .ep-menu-item {
      margin-top: 6px;
    }
  }

  .data-source-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
  }

  .data-source-menu-i {
    width: 4rem;

    &.GET {
      color: #67c23a;
    }

    &.POST {
      color: #e6a23c;
    }

    &.PUT {
      color: #409eff;
    }

    &.DELETE {
      color: #f56c6c;
    }
  }

  .data-source-menu-action {
    display: inline-block;
    padding-right: 10px;
    color: #666;
    font-weight: 600;

    > i {
      cursor: pointer;
      margin-left: 5px;
    }
  }
}
</style>
